﻿<%@ Page Language="C#" %>

<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
    Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"
    Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript">
        var _fV4UI = true;
    </script>
    <link rel="stylesheet/less" href="/Style Library/SPA-Assets/css/bootstrap.min.css">
    <script src="/Style Library/SPA-Assets/js/less-1.3.0.min.js"></script>
    <SharePoint:SPPageManager runat="server" />
    <style type="text/css">
        body
        {
            padding-top: 60px;
            padding-bottom: 40px;
        }
        .sidebar-nav
        {
            padding: 9px 0;
        }
    </style>
</head>
<body>
    <form runat="server">
    <SharePoint:FormDigest runat="server" />
    <script type="text/html" id="field-template">
        <tr data-bind="if: !$parent.Editable($data)">
            <td data-bind="text:Field"></td>
            <td data-bind="text:Value"></td>
            <td data-bind="text:Type"></td>
        </tr>
        <tr data-bind="if: $parent.Editable($data)">
            <td data-bind="text:Field"></td>
            <td>                                                    
                <input type="text" data-bind="value:Value"></input>
            </td>
            <td data-bind="text:Type"></td>
        </tr>
    </script>
    <script type="text/html" id="list-template">
        <table class="table table-striped table-bordered" id="rows" data-bind="visible: Rows().length > 0">
            <thead>
                <tr>
                    <th>
                        ID
                    </th>
                    <th>
                        Title
                    </th>
                </tr>
            </thead>
            <tbody data-bind="template: { 'name': 'row-template', 'foreach': Rows }">
            </tbody>
        </table>
    </script>
    <script type="text/html" id="row-template">
        <tr data-bind="click: ToggleExpand, css:{ 'alert-info': Expanded }">
            <td data-bind="text:Id"></td>
            <td data-bind="text:DisplayTitle"></td>
        </tr>
        <tr data-bind="visible: Expanded">
            <td colspan="2">
                <div class="btn-group">
                    <button class="btn" data-bind="click:Edit, visible: Mode()!='edit'">Edit</button>
                    <button class="btn" data-bind="click:Save, visible: Mode()=='edit'">Save</button>
                    <button class="btn" data-bind="click:Delete">Delete</button>
                </div>
                <table class="table table-striped table-bordered" >
                    <thead>
                        <tr>
                            <th>Field</th>
                            <th>Value</th>
                            <th>Type</th>
                        </tr>
                    </thead>
                    <tbody data-bind="template: { 'name': 'field-template', 'foreach': Fields }">
                    </tbody>
                </table>

            </td>
        </tr>
    </script>
    <script type="text/html" id="image-list-template">
        <div class="image-list-template" style="position:relative;" data-bind="template: { name: 'image-template', foreach: Rows, afterRender: wookmark }">
            
        </div>
        <div style="clear:both;"></div>
    </script>
    <script type="text/html" id="image-template">
        <div class="hero-unit" style="width:190px; padding:15px 15px 15px 15px; margin: 0px 15px 15px 0px; float:left; ">
            <img data-bind="attr: { src: MediaUrlW }" style="width:190px;float: left;margin-bottom: 15px;" />
            <img data-bind="attr: { src: ModifiedByPicture }" style="width: 48px; float: left;" />
            <div style="float:left; width:140px; overflow:hidden; text-overflow: ellipsis;">
                <div data-bind="text: DisplayTitle" ></div>
                <div data-bind="text: ModifiedDate().toDateString()"></div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </script>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
                    class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </a><a class="brand" href="#" data-bind="text: WebTitle"></a>
                <div class="btn-group pull-right">
                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-user">
                    </i>Username <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Profile</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Sign Out</a></li>
                    </ul>
                </div>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span3">
                <div class="well sidebar-nav" id="sidebar-nav">
                    <ul class="nav nav-list">
                        <li class="nav-header">Lists and Libraries</li>
                        <!-- ko foreach: Lists -->
                        <li data-bind="css: {'active': $root.List() == $data }"><a href="#" data-bind="click: Select">
                            <i data-bind="attr:{ 'class' : ListIconClass }"></i><span data-bind="text: Title">
                            </span></a></li>
                        <!-- /ko -->
                    </ul>
                </div>
                <!--/.well -->
            </div>
            <!--/span-->
            <div class="span9">
                <div class="hero-unit" data-bind="visible: List() == null">
                    <h1 data-bind="text: WebTitle">
                    </h1>
                    <p data-bind="text: WebDescription">
                    </p>
                </div>
                <div class="hero-unit" data-bind="visible: List() != null" style="display: none;">
                    <!-- ko with: List -->
                    <h1>
                        <span data-bind="text: Title"></span>
                    </h1>
                    <p>
                        <img data-bind="attr:{'src': ImageUrl}"></img>
                        <span data-bind="text: Description"></span>
                    </p>
                    <!-- /ko -->
                </div>
                <div class="row-fluid">
                    <div id="list-container" class="span12">
                        <div data-bind="visible: List() == null">
                            Select a list.
                        </div>
                        <div id="empty" data-bind="visible: List() != null && Rows().length == 0" style="display: none;">
                            This list is empty.
                        </div>
                        <!-- ko template: { 'name': ListUITemplate(), 'data': $data } -->
                        <!-- /ko -->
                    </div>
                </div>
            </div>
            <!--/span-->
        </div>
        <!--/row-->
        <hr>
        <footer>
        <p>&copy; spaspa.codeplex.com</p>
      </footer>
    </div>
    <!--/.fluid-container-->
    </form>
    <script src="/_layouts/MicrosoftAjax.js"></script>
    <script src="/_layouts/sp.core.js"></script>
    <script src="/_layouts/sp.runtime.js"></script>
    <script src="/_layouts/sp.js"></script>
    <script src="/Style Library/SPA-Assets/js/jquery-1.7.2.min.js"></script>
    <script src="/Style Library/SPA-Assets/js/bootstrap.min.js"></script>
    <script src="/Style Library/SPA-Assets/js/json2.js"></script>
    <script src="/Style Library/SPA-Assets/js/knockout-2.1.0rc2.js"></script>
    <script src="/Style Library/SPA-Assets/js/knockout.mapping-latest.js"></script>
    <script src="/Style Library/SPA-Assets/js/jl-spa.js"></script>
</body>
</html>
